<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flati | responsive html5 template | themeforest | josweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!--[if IE]>
	<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
<![endif]-->

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link href="css/colour.css" rel="stylesheet" type="text/css"/>
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css"/>
<link href="css/zocial.css" rel="stylesheet" type="text/css"/>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<!--header-->
	<div class="header">
<!--menu-->
    <nav id="main_menu" class="navbar" role="navigation">
      <div class="container">
            <div class="navbar-header">
        <!--toggle-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
				<i class="fa fa-bars"></i>
			</button>
		<!--logo-->
			<div class="logo">
				<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
			</div>
		</div>
           
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav pull-right">
                   			<li class="dropdown"><a href="javascript:{}">Home</a> 
							<ul class="dropdown-menu">
							<li><a href="index.html">Slider Revolution</a></li>
							<li><a href="index2.html">Nerve Slider</a></li>
							<li><a href="index3.html">NivoSlider</a></li>
							<li><a href="index4.html">Slides</a></li>
							<li><a href="index5.html">Html5 Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Pages</a>
						<ul class="dropdown-menu">
								<li><a href="team.html">The Team</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="timeline.html">Timeline</a></li>
								<li><a href="full.html">Full Width</a></li>
								<li><a href="left_sidebar.html">Left Sidebar</a></li>
								<li><a href="right_sidebar.html">Right Sidebar</a></li>
						</ul>
							</li>
							<li class="dropdown active"><a href="javascript:{}">Work</a>
						<ul class="dropdown-menu">
								<li><a href="portfolio_2columns.html">2 Columns</a></li>
								<li><a href="portfolio_3columns.html">3 Columns</a></li>
								<li><a href="portfolio_4columns.html">4 Columns</a></li>
								<li><a href="portfolio_masonry.html">Masonry</a></li>
								<li><a href="gallery.html">Paginated Gallery</a></li>
								<li><a href="video_gallery.html">Video Gallery</a></li>
								<li><a href="single_portfolio.html">Single Slider</a></li>
								<li><a href="single_video.html">Single Video</a></li>
								<li><a href="single_image.html">Single Image</a></li>
								<li><a href="full_slider.html">Full Slider</a></li>
								<li><a href="full_video.html">Full Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Style</a>
						<ul class="dropdown-menu">
								<li><a href="scaffolding.html">Scaffolding</a></li>
								<li><a href="shortcodes.html">Shortcodes</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="script_examples.html">JS Examples</a></li>
								<li><a href="javascript:{}">Sub Menu</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Sub One</a></li>
								<li><a href="#">Sub Two</a></li>
								<li><a href="#">Sub Three</a></li>
								<li><a href="#">Sub Four</a></li>
							</ul>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Extras</a>
						<ul class="dropdown-menu">
								<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
								<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
								<li><a href="pricing_table.html">Pricing Table</a></li>
								<li><a href="404.html">404 Page</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Blog</a>
						<ul class="dropdown-menu">
								<li><a href="blog.html">Blog</a></li>
								<li><a href="blog_two.html">Blog II</a></li>
								<li><a href="blog_post.html">Blog Post</a></li>
								<li><a href="blog_post2.html">Blog Post II</a></li>
						</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	<!--//header-->
	
	<!--page-->
	<div id="banner">
		<div class="container intro_wrapper">
			<div class="inner_content">
				<h1>Work</h1>
					<h1 class="title">Masonry Gallery</h1>
						<h1 class="intro">
							Web design is the creation of <span class="hue">digital environments</span>, that <span>facilitate</span> and encourage human activity; 
							<span>reflect </span> or adapt to individual voices and content. - Jeffrey Zeldman
						</h1>
					</div>
				</div>
			</div>
			
			<div class="container wrapper">
			<div class="inner_content">
			
			<!--ADD YOUR THUMBS HERE-->
			<div id="grid-gallery" class="grid-gallery">
				<section class="grid-wrap">
					<ul class="grid">
						<li class="grid-sizer"></li>
					<!--1-->
						<li>
							<figure>
							<div class="hover_img">
								<img src="img/small/masonry_1.jpg" alt="img01"/>
							</div>
								<figcaption>
									<h3><a href="#">Letterpress asymmetrical</a></h3>
										<p>Chillwave hoodie ea gentrify aute sriracha consequat.</p>
									</figcaption>
							</figure>
						</li>
					<!--2-->
						<li>
							<figure>
							<div class="hover_img">
								<img src="img/small/masonry_2.jpg" alt="img02"/>
							</div>
								<figcaption>
									<h3><a href="#">Vice velit chia</a></h3>
										<p>Laborum tattooed iPhone, Schlitz irure nulla Tonx retro 90's chia cardigan quis asymmetrical paleo. </p>
									</figcaption>
							</figure>
						</li>
					<!--3-->
						<li>
							<figure>
							<div class="hover_img">
								<img src="img/small/masonry_3.jpg" alt="img03"/>
							</div>
								<figcaption>
									<h3><a href="#">Brunch semiotics</a></h3>
										<p>Ex disrupt cray yr, butcher pour-over magna umami kitsch before they sold out commodo.</p>
									</figcaption>
							</figure>
						</li>
					<!--4-->
						<li>
							<figure>
							<div class="hover_img">
								<img src="img/small/masonry_4.jpg" alt="img04"/>
							</div>
								<figcaption><h3>
									<a href="#">Chillwave nihil occupy</a></h3>
										<p>In post-ironic gluten-free deserunt, PBR&amp;B non pork belly cupidatat polaroid. </p>
									</figcaption>
							</figure>
						</li>
					<!--5-->
						<li>
							<figure>
							<div class="hover_img">
								<img src="img/small/masonry_5.jpg" alt="img05"/>
							</div>
								<figcaption>
									<h3><a href="#">Kale chips lomo biodiesel</a></h3>
										<p>Pariatur food truck street art consequat sustainable, et kogi beard qui paleo. </p>
									</figcaption>
							</figure>
						</li>
					<!--6-->
						<li>
							<figure>
							<div class="hover_img">
								<img src="img/small/masonry_6.jpg" alt="img06"/>
							</div>
								<figcaption>
									<h3><a href="#">Exercitation occaecat</a></h3>
										<p>Street chillwave hoodie ea gentrify.</p>
									</figcaption>
							</figure>
						</li>
					<!--7-->
						<li>
							<figure>
							<div class="hover_img">
								<img src="img/small/masonry_7.jpg" alt="img01"/>
							</div>
								<figcaption>
									<h3><a href="#">Selfies viral four</a></h3>
										<p>Raw denim duis Tonx Shoreditch labore swag artisan High Life cred, stumptown Schlitz quinoa flexitarian mollit fanny pack.</p>
									</figcaption>
							</figure>
						</li>
					<!--8-->
						<li>
							<figure>
							<div class="hover_img">
								<img src="img/small/masonry_8.jpg" alt="img02"/>
							</div>
								<figcaption>
									<h3><a href="#">Photo booth skateboard</a></h3>
										<p>Vinyl squid ex High Life. Paleo Neutra nulla master cleanse, Helvetica et enim nesciunt esse.</p>
									</figcaption>
							</figure>
						</li>
						
					</ul>
				</section>
			<!-- // grid-wrap -->
				
			<!--SLIDESHOW-->
				<section class="slideshow">
					<ul>
				<!--1-->
						<li>
							<figure>
								<figcaption>
									<h3>Letterpress asymmetrical</h3>
									<p>
										Kale chips lomo biodiesel stumptown Godard Tumblr, mustache sriracha tattooed cray aute slow-carb placeat delectus. 
										Letterpress asymmetrical fanny pack art party est pour-over skateboard anim quis, ullamco craft beer.
									</p>
								</figcaption>
								<img src="img/large/masonry_1.jpg" alt="img01"/>
							</figure>
						</li>
				<!--2-->
						<li>
							<figure>
								<figcaption>
									<h3>Vice velit chia</h3>
									<p>
										Chillwave Echo Park Etsy organic Cosby sweater seitan authentic pour-over. Occupy wolf selvage bespoke tattooed, 
										cred sustainable Odd Future hashtag butcher.
									</p>
								</figcaption>
								<img src="img/large/masonry_2.jpg" alt="img02"/>
							</figure>
						</li>
				<!--3-->
						<li>
							<figure>
								<figcaption>
									<h3>Brunch semiotics</h3>
									<p>
										IPhone PBR polaroid before they sold out meh you probably haven't heard of them leggings tattooed tote bag, butcher paleo next 
										level single-origin coffee photo booth.
									</p>
								</figcaption>
								<img src="img/large/masonry_3.jpg" alt="img03"/>
							</figure>
						</li>
				<!--4-->
						<li>
							<figure>
								<figcaption>
									<h3>Chillwave nihil occupy</h3>
									<p>
										Vice cliche locavore mumblecore vegan wayfarers asymmetrical letterpress hoodie mustache. Shabby chic lomo polaroid, 
										scenester 8-bit Portland Pitchfork VHS tote bag.
									</p>
								</figcaption>
								<img src="img/large/masonry_4.jpg" alt="img04"/>
							</figure>
						</li>
				<!--5-->
						<li>
							<figure>
								<figcaption>
									<h3>Kale chips lomo biodiesel</h3>
									<p>
										Chambray Schlitz pug YOLO, PBR Tumblr semiotics. Flexitarian YOLO ennui Blue Bottle, forage dreamcatcher chillwave put a 
										bird on it craft beer Etsy.
									</p>
								</figcaption>
								<img src="img/large/masonry_5.jpg" alt="img05"/>
							</figure>
						</li>
				<!--6-->
						<li>
							<figure>
								<figcaption>
									<h3>Exercitation occaecat</h3>
									<p>
										Cosby sweater hella lomo Thundercats VHS occupy High Life. Synth pop-up readymade single-origin coffee, 
										fanny pack tousled retro. Fingerstache mlkshk ugh hashtag, church-key ethnic street art pug yr.
									</p>
								</figcaption>
								<img src="img/large/masonry_6.jpg" alt="img06"/>
							</figure>
						</li>
				<!--7-->
						<li>
							<figure>
								<figcaption>
									<h3>Selfies viral four</h3>
										<p>
											Ethnic readymade pug, small batch XOXO Odd Future normcore kogi food truck craft beer single-origin 
											coffee banh mi photo booth raw denim. XOXO messenger bag pug VHS. Forage gluten-free polaroid, twee hoodie chillwave Helvetica.
										</p>
								</figcaption>
								<img src="img/large/masonry_7.jpg" alt="img01"/>
							</figure>
						</li>
				<!--8-->
						<li>
							<figure>
								<figcaption>
									<h3>Photo booth skateboard</h3>
									<p>
										Thundercats pour-over four loko skateboard Brooklyn, Etsy sriracha leggings dreamcatcher narwhal authentic 3 wolf moon synth 
										Portland. Shabby chic photo booth Blue Bottle keffiyeh, McSweeney's roof party Carles.
									</p>
								</figcaption>
								<img src="img/large/masonry_8.jpg" alt="img02"/>
							</figure>
						</li>
					</ul>
					<nav>
						<span class="icon nav-prev"></span>
						<span class="icon nav-next"></span>
						<span class="icon nav-close"></span>
					</nav>
					<div class="info-keys icon">Navigate with arrow keys</div>
				</section><!-- // slideshow -->
			</div><!-- // grid-gallery -->
		</div>
	</div>
	<!--//page-->
    
     <!-- footer -->
	<div id="footer2">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
				<div class="copyright">
							FLATI
							&copy;
							<script type="text/javascript">
							//<![CDATA[
								var d = new Date()
								document.write(d.getFullYear())
								//]]>
								</script>
							 - All Rights Reserved :
							Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
						</div>
						</div>
					</div>
				</div>
			</div>
			<!-- up to top -->
				<a href="#"><i class="go-top fa fa-angle-double-up"></i></a>
				<!--//end-->
				
<script src="js/jquery.js"></script>			
<script src="js/bootstrap.min.js"></script>	
<script src="js/retina.js"></script>
<script src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpGridGallery.js"></script>
<script>
//<![CDATA[
	new CBPGridGallery( document.getElementById( 'grid-gallery' ) );
//]]>
</script>

</body>
</html>	

